<!--
 * @Description: 当月检测缺陷数统计
 * @Author: Huang Junjie
 * @Date: 2021-06-01 15:27:00
 * @LastEditTime: 2021-06-03 12:13:52
 * @LastEditors: Huang Junjie
-->
<template>
  <div class="monthly-statistics-of-detection-of-defects-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <!-- 标题栏 -->
      <div class="title">
        <div class="point-icon" />
        <span>当月检测缺陷数统计</span>
      </div>
      <!-- 标题栏 -->

      <div class="content">
        <!-- 当月检测缺陷数统计图表 -->
        <div
          id="PieChart01"
          class="echart01"
        />
        <!-- 当月检测缺陷数统计图表 -->

        <div class="table-div">
          <table
            class="table"
            cellspacing="0"
          >
            <tr class="tr-th">
              <th class="th">责任单位</th>
              <th class="th">缺陷总数</th>
              <th class="th">已销号数</th>
            </tr>
            <tr
              v-for="(item, index) in tableDataList"
              :key="`a${index}`"
              class="tr-td"
            >
              <td class="column1">{{ item.name }}</td>
              <td class="column2">{{ item.num1 }}</td>
              <td class="column3">{{ item.num2 }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { PieChart01 } from './common/js/EchartsModel';

// 引入echarts
const echarts = require('echarts');

export default {
  data() {
    return {
      tableDataList: [
        { name: '怀化供电段', num1: 435, num2: 260 },
        { name: '长沙供电段', num1: 435, num2: 260 },
        { name: '衡阳供电段', num1: 435, num2: 260 },
        { name: '广州供电段', num1: 435, num2: 260 },
        { name: '深圳供电段', num1: 435, num2: 260 },
        { name: '海口综合维修段', num1: 435, num2: 260 }
      ]
    };
  },
  mounted() {
    this.getPieChart01(); // 加载当月检测缺陷数统计Echarts图表
  },
  methods: {
    // 加载当月远动缺陷统计Echarts图表
    getPieChart01() {
      const myChart = echarts.init(document.getElementById('PieChart01'));
      PieChart01(myChart); // 当月检测缺陷数统计 - 饼状图
    }
  }
};
</script>

<style lang="scss" scoped>
.monthly-statistics-of-detection-of-defects-style {
  position: relative;
  color: white;
  width: 454px;
  height: 328px;
  box-sizing: border-box;
  overflow: hidden;
  .component-inner-div {
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0a1944, $alpha: 0.9);
    box-sizing: border-box;
    .title {
      color: #3695FF;
      font-size: 20px;
      padding: 0;
      margin: 20px 16px 0 16px;
      padding-bottom: 16px;
      align-items: center;
      display: flex;
      border-bottom: 1px solid #0b62a3;
      .point-icon {
        background-color: #3695FF;
        height: 10px;
        width: 10px;
        margin: 0 10px 0 0;
      }
    }
    .content {
      display: flex;
      .echart01 {
        width: 180px;
        height: 250px;
      }
      .table-div {
        margin: 12px 16px 0 0;
        .table {
          border-collapse: collapse;
          width: 100%;
          .tr-th {
            font-size: 14px;
            .th {
              font-weight: 300;
              padding: 8px 0 8px 0;
              border: 1px solid rgba(12, 58, 144, 0.4);
            }
          }
          td {
            border: 1px solid rgba(12, 58, 144, 0.4);
          }
          .tr-td {
            font-size: 14px;
            .column1 {
              padding: 8px 0;
              width: 110px;
              text-align: center;
              border: 1px solid rgba(12, 58, 144, 0.4);
            }
            .column2 {
              padding: 8px 0;
              width: 70px;
              text-align: center;
              border: 1px solid rgba(12, 58, 144, 0.4);
            }
            .column3 {
              padding: 8px 0;
              width: 70px;
              text-align: center;
              border: 1px solid rgba(12, 58, 144, 0.4);
            }
          }
        }
      }
    }
  }
}
</style>
